<template>
	<view>
		<view class="shop_data shop_data_top">
			<view class="shop_data_title">店铺记录</view>
			<view class="deal" v-if="!loadding">
				<view class="time-range-picker">
					<view class="time-item">
						<text>开始时间</text>
						<view class="time-value">
							<picker start="1980-01-01" mode="date" :value="startDate" @change="startDateChange">
								<view class="uni-input">{{startDate}}</view>
							</picker>
						</view>
					</view>
					<view class="time-item">
						<text>结束时间</text>
						<view class="time-value">
							<picker start="1980-01-01" mode="date" :value="endDate" @change="endDateChange">
								<view class="uni-input">{{endDate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="d-s-c  deal_list">
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.totalRent}}</view>
						<view>总租金</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.rentRepaid}}</view>
						<view>待还租金</view>
					</view>
					<view class="deal_item d-c d-c-c">
						<view class="item_num">{{order.overdueRate}}</view>
						<view>逾期率</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.rentPaid}}</view>
						<view>已还租金</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.advanceRent}}</view>
						<view>实付金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.activeRepayment}}</view>
						<view>主动还款</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.pendingBuyout}}</view>
						<view>买断金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.yuqiRepayment}}</view>
						<view>逾期金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.daikouRepayment}}</view>
						<view>代扣金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.hetong}}</view>
						<view>合同金额</view>
					</view>
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.jinhuo}}</view>
						<view>合集进货金额</view>
					</view>
					<!-- <view class="deal_item d-c  d-c-c">
							<view class="item_num">{{order.daikouRepayment}}</view>
							<view>未到期金额</view>
						</view> -->
					<view class="deal_item d-c  d-c-c">
						<view class="item_num">{{order.lirun}}</view>
						<view>利润</view>
					</view>
					<!-- <view class="deal_item d-c  d-c-c">
							<view class="item_num">{{order.huaizhang}}</view>
							<view>坏账订单数</view>
						</view>
						<view class="deal_item d-c  d-c-c">
							<view class="item_num">{{order.huaizhangRate}}</view>
							<view>坏账订单率</view>
						</view>
						<view class="deal_item d-c  d-c-c">
							<view class="item_num">{{order.huaizhangPrice}}</view>
							<view>坏账金额</view>
						</view>
						<view class="deal_item d-c  d-c-c">
							<view class="item_num">{{order.huaizhangPriceRate}}</view>
							<view>坏账金额率</view>
						</view> -->

				</view>
			</view>
		</view>
		<view class="shop_data">
			<view class="shop_data_title">订单结算</view>
			<view>
				<view v-for="(item,index) in orderList" :key="index" class="data_list">
					<view class="d-b-c mb20">
						<view class="datalist_item" style="width: 400rpx;">订单号：{{item.orderMaster.order_no}}</view>
						<view class="datalist_item orange" style="width:50rpx;" @click="todetail(item.settled_id)">详情
						</view>
					</view>
					<view class="d-b-c">
						<view class="datalist_item" style="width: 250rpx;">支付金额：{{item.pay_money}}</view>
						<view class="datalist_item" style="width: 250rpx;">结算金额：{{item.supplier_money}}</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="orderList.length==0 && !loadding">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	export default {
		data() {
			return {
				order: {},
				visit: {},
				orderList: [],
				/*底部加载*/
				loadding: true,
				/*没有更多*/
				no_more: false,
				/*当前页面*/
				page: 1,
				last_page: 0,
				startDate: "请选择开始日期",
				endDate: "请选择结束日期"
			}
		},
		components: {
			uniLoadMore
		},

		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loadding) {
					return 1;
				} else {
					if (this.orderList.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		async mounted() {
			const todayStart = new Date();
			todayStart.setHours(0, 0, 0, 0);
			const now = new Date();
			const formatDate = (date) => {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			};
			this.startDate = formatDate(todayStart);
			this.endDate = formatDate(now);
			await this.info();
			this.getData();
		},
		methods: {
			formatDate(date) {
				if (!date) return '';
				const d = new Date(date);
				const year = d.getFullYear();
				const month = String(d.getMonth() + 1).padStart(2, '0');
				const day = String(d.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			startDateChange(e) {
				this.startDate = this.formatDate(e.detail.value)
				this.info()
			},
			endDateChange(e) {
				this.endDate = this.formatDate(e.detail.value)
				this.info()
			},
			info() {
				let self = this;
				self._post('supplier.index/dataCenter', {
					startTime: self.startDate, //开始时间
					endTime: self.endDate //结束时间
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						self.order = res.data.data.rent;
					}
				})
			},
			/*可滚动视图区域到底触发*/
			onReachBottom() {
				let self = this;
				if (self.no_more) {
					return;
				}
				self.page++;
				if (self.page <= self.last_page) {
					self.getData();
				} else {
					self.no_more = true;
				}
			},
			//获取数据列表
			getData(e) {
				let self = this;
				let page = self.page;
				self.loadding = true;
				uni.showLoading({
					title: '加载中'
				})
				self._post('supplier.index/storedata', {
					page: page || 1
				}, (res) => {
					self.orderList = self.orderList.concat(res.data.ordersettle.data);
					self.visit = res.data.visit;
					self.last_page = res.data.ordersettle.last_page;
					if (res.data.ordersettle.last_page <= 1) {
						self.no_more = true;
					} else {
						self.no_more = false;
					}
					self.loadding = false;
					uni.hideLoading()
				})
			},
			todetail(id) {
				this.gotoPage('/pages/user/my_shop/my_shop_detail?settled_id=' + id);
			}
		}
	}
</script>

<style scoped>
	.time-value {
		display: flex;
		align-items: center;
	}

	.time-value text {
		color: #999;
		margin-right: 10rpx;
	}

	.time-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}

	.time-item:not(:last-child) {
		border-bottom: 1rpx solid #f5f5f5;
	}

	.time-range-picker {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.shop_data {
		width: 90%;
		padding: 30rpx;
		background-color: white;
		margin: 0 auto;
		margin-top: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		color: #585858;
	}

	.shop_data_title {
		font-size: 30rpx;
		margin-bottom: 50rpx;
		font-weight: 800;
	}

	.deal .title,
	.visit .title {

		font-size: 30rpx;
		padding-bottom: 15rpx;
	}

	.deal_list {
		flex-wrap: wrap;
	}

	.deal_item {
		width: 33%;
		margin: 20rpx 0;
	}

	.item_num {
		margin-bottom: 20rpx;
		color: #6EC2CB;
	}

	.datalist_item {
		/* text-align: center; */
	}

	.data_list {
		border-top: 1rpx solid #CCCCCC;
		padding: 20rpx 20rpx;
	}
</style>